<template>
  <ChartComp :id="id?id:'guideComp'"
    :message="guideCompMessage" />
</template>

<script>
import { getGuideProject } from '@/api/chart.js'
import ChartComp from '@/components/echart/charts.vue'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'
const colorList = [
  '#cca8ba',
  '#88cc81',
  '#82a0c5',
  '#fddb7e',
  '#735ba1',
  '#bda29a',
  '#6e7074',
  '#546570',
  '#c4ccd3',
  '#3a96f5',
  '#5faaf7',
  '#78bafe',
  '#1563f2',
  '#add2f8',
  '#e24bf4',
  '#1acaff',
  '#ffde00',
  '#89fda5',
  '#fda67e',
  '#81cacc'
]
// const chartData = [
//   {
//     name: '系统动力学',
//     value: 77
//   },
//   {
//     name: '全基因组合成',
//     value: 30
//   },
//   {
//     name: '万物互联',
//     value: 40
//   },
//   {
//     name: '雷达与通信系统一体化',
//     value: 70
//   },
//   {
//     name: '视觉单目标跟踪算法研究',
//     value: 50
//   },
//   {
//     name: '众筹科技十四五',
//     value: 80
//   },
//   {
//     name: '多位太赫兹',
//     value: 120
//   },
//   {
//     name: '人工智能',
//     value: 60
//   },
//   {
//     name: '云计算',
//     value: 35
//   },
//   {
//     name: '目标追踪',
//     value: 20
//   }
// ]
export default {
  components: {
    ChartComp
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      guideCompMessage: {}
    }
  },
  created() {},
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      getGuideProject({ year: this.year }).then(res => {
        let chartData = res?.data ?? []
        this.guideCompMessage = {
          tooltip: {
            show: true,
            trigger: 'item',
            className: 'LineChart-tooltip',
            extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 1px solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
            border-radius: 4px;`,
            formatter: function (params) {
              var res =
                params.name +
                '<br/>' +
                '项目数量：' +
                params.data.value +
                '（个）'
              return res
            }
          },
          grid: {
            left: '0',
            bottom: '0',
            top: '0',
            right: '0'
          },
          xAxis: {
            type: 'category',
            show: false
          },
          yAxis: {
            max: 100,
            show: false
          },
          series: [
            {
              type: 'wordCloud',
              //用来调整词之间的距离
              gridSize: 15,
              //用来调整字的大小范围
              sizeRange: [10, 21],
              //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
              // rotationRange: [-45, 0, 45, 90],
              // rotationRange: [0, 90],
              rotationRange: [0, 0],
              //随机生成字体颜色
              // maskImage: maskImage,
              textStyle: {
                fontFamily: 'sans-serif',
                color: function () {
                  let index = Math.floor(Math.random() * colorList.length)
                  return colorList[index]
                }
              },
              //位置相关设置
              left: 'center',
              top: 'center',
              right: null,
              bottom: null,
              width: '100%',
              height: '100%',
              data: chartData
            }
          ]
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>